<template>
  <div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <Icon type="logo-github" size="42" color="#181617" />
        </div>
        <div>
          <div class="title">Github</div>
          <div class="desc">
            <span v-if="relate.github"
              >已绑定Github账号：{{ relate.githubUsername }}</span
            >
            <span v-else>暂未绑定Github账号</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.github" @click="toSocialLogin('github')">立即绑定</a>
        <a v-else @click="unRelate('github')">解除绑定</a>
      </div>
    </div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <img src="@/assets/icon/qq.png" style="width: 42px" />
        </div>
        <div>
          <div class="title">QQ</div>
          <div class="desc">
            <span v-if="relate.qq">已绑定QQ账号：{{ relate.qqUsername }}</span>
            <span v-else>暂未绑定QQ账号</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.qq" @click="toSocialLogin('qq')">立即绑定</a>
        <a v-else @click="unRelate('qq')">解除绑定</a>
      </div>
    </div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <Icon custom="iconfont icon-weixin" size="40" color="#60c126"></Icon>
        </div>
        <div>
          <div class="title">微信</div>
          <div class="desc">
            <span v-if="relate.wechat"
              >已绑定微信账号：{{ relate.wechatUsername }}</span
            >
            <span v-else>暂未绑定微信账号</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.wechat" @click="toSocialLogin('wechat')">立即绑定</a>
        <a v-else @click="unRelate('wechat')">解除绑定</a>
      </div>
    </div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <img src="@/assets/icon/weibo.png" style="width: 41px" />
        </div>
        <div>
          <div class="title">微博</div>
          <div class="desc">
            <span v-if="relate.weibo"
              >已绑定微博账号：{{ relate.weiboUsername }}</span
            >
            <span v-else>暂未绑定微博账号</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.weibo" @click="toSocialLogin('weibo')">立即绑定</a>
        <a v-else @click="unRelate('weibo')">解除绑定</a>
      </div>
    </div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <img src="@/assets/icon/dingding.png" style="width: 41px" />
        </div>
        <div>
          <div class="title">钉钉</div>
          <div class="desc">
            <span v-if="relate.dingding"
              >已绑定钉钉账号：{{ relate.dingdingUsername }}</span
            >
            <span v-else>暂未绑定钉钉账号</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.dingding" @click="toSocialLogin('dingding')"
          >立即绑定</a
        >
        <a v-else @click="unRelate('dingding')">解除绑定</a>
      </div>
    </div>
    <div class="item">
      <div class="social">
        <div class="logo">
          <img src="@/assets/icon/qiyeweixin.png" style="width: 41px" />
        </div>
        <div>
          <div class="title">企业微信</div>
          <div class="desc">
            <span v-if="relate.workwechat"
              >已绑定企业微信账号：{{ relate.workwechatUsername }}</span
            >
            <span v-else>暂未绑定企业微信</span>
          </div>
        </div>
      </div>
      <div>
        <a v-if="!relate.workwechat" @click="toSocialLogin('workwechat')"
          >立即绑定</a
        >
        <a v-else @click="unRelate('workwechat')">解除绑定</a>
      </div>
    </div>
  </div>
</template>

<script>
import { relatedInfo, unRelate, socialLogin } from "@/api/index";
export default {
  components: {},
  name: "social",
  data() {
    return {
      relate: {},
    };
  },
  methods: {
    init() {
      let userInfo = this.getUserInfo();
      relatedInfo(userInfo.username).then((res) => {
        if (res.success) {
          this.relate = res.result;
        } else {
          this.$Message.error("加载绑定第三方账号信息失败");
        }
      });
    },
    toSocialLogin(platform) {
      this.$Message.loading({
        content: "跳转中...",
        duration: 0,
      });
      socialLogin(platform).then((res) => {
        if (res.success) {
          window.location.href = res.result;
        } else {
          this.$Message.destroy();
        }
      });
    },
    unRelate(platform) {
      let platformName, relateUsername, relateId;
      if (platform == "github") {
        platformName = "Github";
        relateUsername = this.relate.githubUsername;
        relateId = this.relate.githubId;
      } else if (platform == "qq") {
        platformName = "QQ";
        relateUsername = this.relate.qqUsername;
        relateId = this.relate.qqId;
      } else if (platform == "weibo") {
        platformName = "微博";
        relateUsername = this.relate.weiboUsername;
        relateId = this.relate.weiboId;
      } else if (platform == "wechat") {
        platformName = "微信";
        relateUsername = this.relate.wechatUsername;
        relateId = this.relate.wechatId;
      } else if (platform == "dingding") {
        platformName = "钉钉";
        relateUsername = this.relate.dingdingUsername;
        relateId = this.relate.dingdingId;
      } else if (platform == "workwechat") {
        platformName = "企业微信";
        relateUsername = this.relate.workwechatUsername;
        relateId = this.relate.workwechatId;
      } else {
        this.$Message.error("不支持的第三方平台");
        return;
      }
      this.$Modal.confirm({
        title: "确认解绑" + platformName + "账号",
        content: "您确认要解除绑定 " + relateUsername + " ?",
        loading: true,
        onOk: () => {
          let params = {
            ids: [relateId],
          };
          unRelate(params).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.relate.github = false;
            }
          });
        },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
